@import '~@/assets/css/mixins.styl'
.m-main  {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  .carousel {
    position: relative;
    padding-bottom: 560px;
    width: 100%;
    height: 0;
    background: url(../addImg/home/homeBigBanner.png) center center/100% 100%;
    .title{
      position: absolute;
      width: 100%;
      top: calc((100% - 110px) / 2);
      margin-top: -75px;
      left: 0;
      color: $white-color;
      text-align: center;
      font-weight: bold;
      .title_text{
        font-size: 42px;
        line-height: 70px;
        letter-spacing: 2px;
      }
      .title_text_des{
        font-size: 30px;
        line-height: 66px;
        font-weight: 100;
        span{
          position: relative;
          margin-right: 20px;
          &::after{
            position: absolute;
            top: 16px;
            right: -12px;
            content: "";
            width: 5px;
            height: 5px;
            background: #fff;
            border-radius: 50%;
          }
        }
        span:nth-child(4){
          &::after{
            width: 0;
            height: 0;
          }
        }
      }
      .learnMore{
        margin-top: 20px;
        padding: 0 50px;
        border-radius: 45px;
        background: #FFBE09;
        font-size: 20px;
        color: #5081CD;
        height: 40px;
      }
    }
    .banner {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      margin-bottom: 0;
    }
    .slide-img {
      cursor :pointer;
      min-height: 250px;
    }
    .slide-img img {
      width: 100%;
      display: block;
    }
    .slider-pagination-bullet {
      background-color: $white-color;
      opacity: 1;
    }
    .slider-pagination-bullet-active {
      width: 35px !important;
      border-radius: 5px !important;
    }
    .bar {
      position: absolute;
      width: 100%;
      bottom: 10px;
      margin: 0 auto;
      text-align: center;
      span {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: $white-color;
        border-radius: 50%;
        opacity: 0.5;
        margin-right: 10px;
        z-index: 1;
      }
    }
    .noticeBox {
      width: 100%;
      height:40px;
      margin:10px auto 0 ;
      background: rgba(0, 0, 0, .4) // 胖虎修改
      overflow: hidden;
      .noticeDiv{
        margin: 0 auto;
        width: 400px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: flex;
        transform: translateX(50px);
        .noticeCont{
          width: 380px;
          p {
            font-size: 14px;
            display:inline-block;
            cursor: pointer;
            color: $white-color;
          }
          .MoreNotices{
            color:$blue-font-color
          }
          p:hover,
          .MoreNotices:hover{
            color:$blue-font-color;
          }
        }
      }
    }
  }
  .main-content{
    position: relative;
    //width: 1200px;
    //margin: 0 auto;
    .siteTabParent{
      background: $sub-background-color;
      .siteTab{
        margin: 0 auto;
        padding-top:30px;
        width: 1200px;
        height:40px;
        line-height:40px;
        li{
          float:left;
          font-size:16px;
          margin-right:40px;
          color:$explain-font-color;
          cursor:pointer;
          &:hover{
            color:$blue-font-color;
          }
          &.selected{
            color:$blue-font-color;
            border-bottom:2px solid $blue-font-color;
          }
        }
      }

    }
    // 推荐区
    .recomParent{
      background: $sub-background-color;
      .recommend{
        width: 1200px;
        margin: 0 auto;
        padding:30px 0;
        .recomm-content{
          width:19.2%;
          height:120px;
          float:left
          margin-left:1%;
          position:relative;
          overflow:hidden;
          &:hover{
            border: 1px solid $dividing-line-color;
            box-shadow: 0 0 50px #E5F7F8;
          }
          .chart_box{
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:70px;
            z-index:1;
          }
          .content{
            position:relative;
            z-index:2
            margin:20px 12px 0 15px;
            .symbol_buy{
              line-height: 22px;
              font-size:16px;
              font-weight: bold;
              .symbolFor{
                float:left;
              }
              b{
                float:right;
              }
              .symbolIcon{
                float: right;
                i.icon-arrow-up2{
                  color: $buy-color;
                }
                i.icon-arrow-down2{
                  color: $sell-color;
                }
              }
            }
            .price{
              margin-top: 8px;
              line-height: 28px;
              .curPrice{
                font-size: 20px;
                color: $font-color333;
              }
              .rmb{
                font-size: 14px;
                color: $unimportant-font-color2 ;
              }
            }
            .turnover{
              display:block;
              line-height: 20px;
              margin-top: 4px;
              color: $unimportant-font-color2;
            }
          }
        }
        .recomm{
          width:32.1%;
          border:1px solid $border-blue-color;
          height:100%;
          float:left;
          margin-left:1.8%;
          position:relative;
          overflow:hidden;
          .recom-boox{
            padding: 15px;
            li{
              line-height:30px;
            }
          }
        }
        .recomm:first-child,.recomm-content:first-child{
          margin-left:0;
        }
      }
    }
    /* 市场行情标题 */
    .marketParent{
      .marketTitle{
        margin: 30px auto 0;
        width: 1200px;
        font-size: 30px;
        color: $light-grey-color;
        line-height: 80px;
        font-weight: 500;
        background-size: 60px 70px;
        background-repeat: no-repeat;
        background-position: left 18%;
      }
      /* 市场 */
      .market {
        margin:10px auto 0;
        padding-bottom:20px;
        width: 1200px;
        border-radius: 2px;
        .header {
          height: 40px;
          font-size: 16px;
          ul {
            li {
              float: left;
              margin-right: 10px;
              width: 110px;
              height: 38px;
              line-height: 38px;
              text-align: center;
              cursor :pointer;
              border: 1px solid rgba(228,231,237,1);
              color: #333333;
              font-size: 16px;
              span{
                display:inline-block;
                i{
                  color: $white-color;
                }
                .icon-cor{
                  color: $gray-color;
                }
              }
            }
            li.findactive {
              color: $white-color;
              border: none;
              height: 40px;
              line-height: 40px;
              background: $btn-bg-color ;
              img{
                opacity:1;
              }
            }
          }
          .inputBox {
            display :inline-block;
            float:right;
            .search {
              height: 35px;
              margin: 0 !important;
              display:block;
              border-radius: 2px;
              background: $input-background;
              border: none !important;
              .sos {
                display:inline-block;
                font-size: 18px;
                float:right;
                width: 60px;
                line-height:35px;
                text-align: center;
                color: $white-color;
                background: $btn-bg-color ;
              }
              input {
                float: left;
                width: 218px;
                margin-right: 0;
                height: 33px;
                line-height: 33px;
                text-indent: 10px;
                border: 1px solid $border-blue-color;
              }
            }
            .active{
              height: 35px;
              margin-right: 10px;
              display:block;
              margin-top: 8px;
              border-radius: 2px;
              background: $input-background;
              .sos {
                display:inline-block;
                width: 60px;
                font-size: 18px;
                float: right;
                line-height:35px;
                color: $white-color;
              }
              input {
                float: left;
                width: 218px;
                margin: 0;
                height: 33px;
                line-height: 33px;
                text-indent: 10px
                border: 1px solid  $theme-active-color !important ;
              }
            }
          }
          .coin_currency{
            img{
              width:15px;
              height:15px;
              vertical-align: middle;
              margin-right:3px;
              position:relative;
              top:-2px;
              opacity:0.6;
            }
          }
        }
        .headerFixed{
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          padding-top: 20px;
          z-index: 100;
          .center{
            margin: 0 auto;
            width: 1200px;
          }
        }
        .tableDivFixed {
          position: fixed;
          left: 0;
          top: 60px;
          width: 100%;
          z-index: 100;
          table{
            margin: 0 auto !important;
            width: 1200px !important;
          }
        }
        .mark-box {
          position: relative;
          width: 100%;
          font-size: 12px;
          text-align: center;
          padding-bottom:20px;
          tbody{
            tr{
              &:hover{
                background:$table-border-color;
              }
            }
          }
          tr {
            &.noHover{
              background:none;
            }
            th{
              color: $save-detail-font-color;
              line-height:40px;
              width:15%;
              text-align: right;
            }
            .market_title_align{
              text-align: left;
              text-indent: 5%;
            }
            .newprice_align{
              text-align: left;
            }
            .rise_align{
              width:10%;
            }
            td{
              font-size: 14px;
              width:15%;
              line-height:45px;
            }
            td.no_data{
              line-height:180px;
            }
            .mark{
              position: relative;
              text-align: left
              padding-left: 50px
              cursor:pointer;
              i{
                position: absolute;
                top: 13px;
                left: 20px;
                color: $selected-star-color;
                font-size: 15px;
              }
              .icon-cor{
                color: #999;
              }
              span{
                font-size: 14px;
                color: #333;
              }
            }
            .noHover{
              color: $save-detail-font-color;
            }
            .receet{
              display:inline-block;
              width:15px;
              height 15px;
              position:relative;
            }
            .sorte{
              font-size:12px;
              left: 8px;
              position:absolute;
            }
            .iconNoFont-sup, .iconNoFont-sdow{
              display:block;
              height:4px;
              width:4px;
              line-height:0;
              transform: rotateZ(45deg);
              border-style:solid;
              border-width: 1px;
            }
            .iconNoFont-sup{
              border-color:rgba(153,153,153,1) rgba(0,0,0,0) rgba(0,0,0,0) rgba(153,153,153,1);
            }
            .iconNoFont-sdow{
              border-color: rgba(0,0,0,0) rgba(153,153,153,1) rgba(153,153,153,1) rgba(0,0,0,0);
            }
            .up {
              top:5px
            }
            .down{
              top:8px;
            }
            .new_price {
              cursor:pointer;
              i.cur{
                color: $blue-font-color;
              }
            }
            .up.cur,.up.curr,.volUp.curr,.amountUp.curr{
              border-color:$blue-font-color rgba(0,0,0,0) rgba(0,0,0,0) $blue-font-color;
            }
            .down.cur,.down.curr,.volDow.curr,.amountDow.curr{
              border-color: rgba(0,0,0,0) $blue-font-color $blue-font-color rgba(0,0,0,0);
            }
            .highprice_align,
            .lowprice_align,
            .vol_align,
            .amount_align,
            .rise_align{
              text-align: right;
              padding-right: 20px;
            }
            .vol_align,
            .amount_align,
            .rise{
              cursor:pointer;
            }
          }
          .symboy_bgc{
            background:$subheade-background-color;
          }
          .area{
            position: relative;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: left;
            text-indent: 10px;
            &::before{
              position: absolute;
              content: '';
              left: 0;
              top: 14px;
              width: 4px;
              height: 16px;
              background: $blue-font-color;
            }
            .introduce{
              float: right;
              margin-right: 20px;
              color: $save-detail-font-color;
              i{
                margin-left: 3px;
              }
            }
          }
        }
        .btcurr,.zxcurr{
          display:none
        }
        .show{
          display:block ;
        }
      }
    }

}


  .slide-active {
    width: 24px !important;
    border-radius: 5px !important;
    opacity: 2 !important;
  }
  .search-icon {
    display: inline-block;
    width: 22px;
    height: 23px;
    background: url("..//img/index-1.png") no-repeat;
    vertical-align: middle;
    margin-right: 4px;
    cursor: pointer;
    }
  .search{
    float: left ;
    background-position: 0 5px;
    margin: 3px;
    }
  .prompt{
    height:50px;
    line-height:50px;
    color:$explain-font-color;
    text-align: center
  }

  //  下面是我添加的组件的样式
  .bizu {
    width: 100%;
    .bizuActive_parent{
      padding: 50px 0 60px;
      background: $sub-background-color;
      .bizuActive {
        pageWidth()
        .bizuActive_title_En,
        .bizuActive_title{
          text-align: center;
          color: $bizuActiveTitle-color;
          font-size: 30px;
          letter-spacing: 10px;
        }
        .bizuActive_title_En{
          margin-top: 20px;
          font-weight: 400;
          font-size: 18px;
          line-height: 40px;
          color: $light-grey-color;
          letter-spacing: 5px;
        }
        .bizuActive_img{
          margin-top: 40px;
          display: flex;
          justify-content: space-between;
          .bizuActive_img_tab{
            position: relative;
            width: 264px;
            height: 350px;
            box-sizing: border-box;
            transition: all .3s;
            &:hover{
              box-shadow: 0 20px 40px #E5F7F8;
              border-bottom: 3px solid #29CFD6;
              transform: translateY(-5px);
            }
            &:hover p{
              font-weight: bold;
            }
            a{
              display: block;
              width: 100%;
              height: 100%;
              div{
                box-sizing: border-box;
                text-align: center;
                height: 70%;
              }
              p{
                position: absolute;
                width: 100%;
                font-size: 14px;
                text-align: center;
                left: 0;
                bottom: 44px;
                color: #333;
              }
            }
          }
          .bizuActive_img_tab:nth-child(1){
            div{
              padding-top: 33px;
            }
          }
          .bizuActive_img_tab:nth-child(2){
            div{
              padding-top: 32px;
            }
          }
          .bizuActive_img_tab:nth-child(3){
            div{
              padding-top: 32px;
            }
          }
          .bizuActive_img_tab:nth-child(4){
            div{
              padding-top: 37px;
            }
          }
        }
      }
    }
    .bizuMiddle{
      position: relative;
      height: 610px;
      padding-bottom: 100px;
      pageWidth()
      .app{
        position: relative;
        display: flex;
        .app_left, .app_right{
          margin-top: 80px;
          width: 50%
        }
        .app_left{
          height: 530px;
          .app_left_div{
            margin-left: 70px;
            width: 400px;
            img{
              width: 100%;
            }
          }
        }
        .app_right{
          padding-top: 60px;
          padding-left: 80px;
          color: $bizuActiveTitle-color;
          p:nth-of-type(1){
            font-size: 30px;
            font-weight: 500;
            line-height: 40px;
          }
          p:nth-of-type(2){
            line-height: 70px;
            font-size: 20px;
            font-weight: 100;
            opacity: .8;
          }
          div {
            margin-top: 18px;
            overflow: hidden;
            .qrCode {
              float: left;
              width: 190px;
              height: 190px;
              background: #fff;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .btn {
              float: left;
              padding: 35px 0 45px 65px;
              button {
                width: 180px;
                height: 50px;
                font-size: 16px;
                border-radius: 25px;
                text-align: center;
                box-sizing: border-box;
              }
              button:nth-of-type(2){
                margin-top: 30px;
                border: 1px solid #29CFD6;
                baImg()
                background: transparent !important;
                a {
                  display: block;
                  color: #29CFD6;
                }
              }
              button:nth-of-type(1){
                background-image: $btn-bg-color ;
                color: $white-color;
                letter-spacing: 2px;
                box-sizing: border-box;
                padding: 0 3px;
                box-shadow: $btn-shadow-style1;
                baImg()
              }
            }
          }
        }
      }
    }
  }
  // 推送弹窗
  .pushDialog{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: $mask-bg-color;
    z-index: 9999;
    .main{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: $pop-content-background;
      border-radius: 8px;
      .close{
        position: absolute;
        right: -50px;
        top: -30px;
        font-size: 16px;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        border: 1px solid $white-color;
        color: $white-color;
      }
    }
    .text{
      width: 750px;
      min-height: 443px;
      .textCont{
        width: 100%;
        .title{
          height: 147px;
          background: url(../addImg/home/alertBg.png) no-repeat center center/100% 100%;
          h3{
            font-size: 24px;
            color: $white-color;
            line-height: 70px;
            text-align: center;
          }
        }
        .content{
          position: relative;
          min-height: 295px;
          box-sizing: border-box;
          padding: 0 30px 20px;
          p{
            font-size: 14px;
            line-height: 30px;
            letter-spacing: 2px;
            color: #333;
          }
          div{
            position: absolute;
            width: calc(100% - 60px);
            bottom: 20px;
            .know,
            .look{
              display: block;
              margin: 13px auto 0;
              width: 182px;
              height: 50px;
              border-radius: 25px;
              background: $btn-bg-color;
            }
            .look{
              a{
                color: $white-color;
              }
            }
          }
        }
      }
    }
    .poster{
      .posterCont{
        a{
          display: block;
        }
        img{
          max-width: 640px;
          max-height: 500px;
          border-radius: 8px;
          vertical-align: bottom;
        }
      }
    }
  }
}
.m-main .carousel .slider-pagination-bullet-active {
    background-color: $blue-font-color ;
    width: 35px !important;
    border-radius: 5px !important;
}

// 介绍弹窗的样式
.introduce_mark{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  background: $mask-bg-color;
  z-index: 100;
  .introduce_remark{
    position: relative;
    margin: auto;
    width: 750px;
    min-height: 60%;
    box-sizing: border-box;
    padding: 30px 40px 38px;
    color: $light-grey-color;
    border-radius: 5px;
    transition: all .5s;
    transform: translateY(-150px);
    background: $pop-content-background;
    .close{
      position: absolute;
      right: -50px;
      top: -26px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid $white-color;
      border-radius: 50%;
      color: $white-color;
      font-size: 20px;
    }
    .introduce_header{
      padding-bottom: 10px;
      h2{
        font-size:20px;
        line-height:30px;
      }
      .introduce_subTitle{
        font-size: 14px;
        line-height: 20px;
        color: $save-detail-font-color;
      }
    }
    .introduce_line{
      height: 1px;
      width: 100%;
      background: $dividing-line-color;
    }
    .introduce_body{
      margin-top: 20px;
      line-height:26px;
      word-wrap: break-word !important;
      word-break: normal !important;
      font-size:14px;
      p{
        padding-bottom:10px;
        word-wrap: break-word !important;
        word-break: normal !important;
      }
    }
  }
  .translateY{
    transform: translateY(0);
  }
}
